<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>富文本编辑器</title>
		<link href="assets/css/bootstrap.min.css" rel="stylesheet">
		<link href="fu/summernote.css" rel="stylesheet">
		<link rel="stylesheet" href="assets/css/normalize.css" />
		<script type="text/javascript" src="assets/js/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="assets/js/selectize.js"></script>
		<script type="text/javascript" src="assets/js/selectize.index.js"></script>
		<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="fu/summernote.js"></script>
		<script type="text/javascript" src="fu/lang/summernote-zh-CN.js"></script>
	</head>

	<body>
		<div class="modal-body">
			<div class="py-5">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<form class="" id="loginForm">
								<div class="form-group"> <label>文章标题</label>
									<input type="text" name="article_title" class="form-control" placeholder="文章标题"> </div>
								<div class="form-group"> <label>文章标签或分类</label>
									<select id="article_sort" multiple>
										<option value="1" selected>1</option>
										<option value="2" selected>2</option>
										<option value="3" selected>3</option>
										<option value="4" selected>4</option>
										<option value="5" selected>5</option>
										<option value="6" selected>6</option>
									</select>
								</div>
							</form>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<div id="summernote"></div>
							<div class="form-group">
								<button id="getCode" class="btn btn-primary">保存</button> </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		$(function() {
			var ary = [ {id: 1,title: '1',url: 'http://en.wikipedia.org/wiki/Spectrometers'},
						{id: 2,title: '2',url: 'http://en.wikipedia.org/wiki/Spectrometers'},
						{id: 3,title: '3',url: 'http://en.wikipedia.org/wiki/Spectrometers'},
						{id: 4,title: '4',url: 'http://en.wikipedia.org/wiki/Spectrometers'},
						{id: 5,title: '5',url: 'http://en.wikipedia.org/wiki/Spectrometers'},
						{id: 6,title: '6',url: 'http://en.wikipedia.org/wiki/Spectrometers'},
				];
			var $select = $('#article_sort').selectize({
				maxItems: null,
				plugins: ['remove_button'],
				valueField: 'id',
				labelField: 'title',
				searchField: 'title',
//				options: ary,
				create: false
			});
		})
		// 初始化富文本编辑器
		$('#summernote').summernote({
			lang: 'zh-CN', // default: 'en-US'
			placeholder: '请输入内容',
			fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '36'], // 设置字体大小
			height: 300, // 设置编辑器的高
			minHeight: null, // 设置编辑器最小高
			maxHeight: null, // 设置编辑器大高
			focus: true, // 获取焦点
			// toolbar工具栏默认
			toolbar: [
				//['style', ['style']], //行内样式
				['font', ['bold', 'underline', 'italic', "strikethrough", 'clear']], // 字体样式，加粗、下划线、清除['bold', 'underline', 'clear']
				['fontname', ['fontname']], // 字体名称
				['fontsize', ['fontsize']], //字体大小
				['color', ['color']], //颜色
				['para', ['ul', 'ol', 'paragraph']], //列表
				['table', ['table']], //表格
				['insert', ['link', 'picture']], //插入附件,链接、图片、视频['link', 'picture', 'video']
				['view', ['fullscreen', 'codeview']] // 显示，全屏幕、代码视图、帮助['fullscreen', 'codeview', 'help']
			],
			callbacks: {
				onImageUpload: function(files, editor, $editable) {
					sendFile(files);
				}
			}
		});
		function sendFile(files, editor, $editable) {  
	        var data = new FormData();  
	        data.append("file", files[0]);  
	        $.ajax({  
	            data : data,  
	            type : "POST",  
	            url : "http://localhost:8080/bfc_website/upload/image", //图片上传出来的url，返回的是图片上传后的路径，http格式  
	            cache : false,  
	            contentType : false,  
	            processData : false,  
	            success: function(data) {//data是返回的hash,key之类的值，key是定义的文件名  
	                $('#summernote').summernote('insertImage', data);  
	            },  
	            error:function(){  
	                alert("上传失败");  
	            }  
	        });  
	    }  
		// 保存
		$("#getCode").click(function() {
			var markupStr = $('#summernote').summernote('code');
			var value = $('.selectpicker').val();
			console.log(markupStr);
			console.log(value);
		})
	</script>

</html>